<template>
	<view>

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>OTA库存管理</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<!--				<view style="display: flex;" @click="showStatus=!showStatus">-->
				<!--					<text class="city">{{storeName}}</text>-->
				<!--					<u-icon :name="showStatus ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>-->
				<!--				</view>-->

				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="按车牌号/订单号查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>

				<image @click="showFilter=!showFilter" src="/static/other/filter_ota.png"
					style="width: 40rpx;height: 40rpx;" mode="scaleToFill"></image>

			</view>
		</u-sticky>

		<view id="test"></view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index" @click="itemclick(item)">

				<view class="title-wrap" style="justify-content: flex-start;">
					<text style="font-size: 28rpx;color: black;">车牌号:{{item.carLicenceNum|filterNull}}</text>

					<text style="flex: 1;"></text>
					<text class="order-source">{{item.workOrderStatus | workOrderStatus}}</text>
				</view>

				<view class="content-wrap">
					<text class="name">工单类型：</text>
					<text class="value">{{item.workOrderType | workOrderType}}</text>
				</view>

				<view class="content-wrap">
					<text class="name">占用/释放时间：</text>
					<text
						class="value">{{ item.carUsageStartTime|filterNull }}~{{ item.carUsageEndTime|filterNull }}</text>
				</view>

				<view class="content-wrap">
					<text class="name">操作时间：</text>
					<text class="value">{{item.createTime|filterNull}}</text>
				</view>

				<view class="content-wrap">
					<text class="name">执行结果：</text>
					<text class="value">{{item.executionResult|filterNull}}</text>
				</view>


			</view>
		</mescroll-body>


		<view v-if="showFilter" @click="showFilter=false" class="filterPop" :style="[{top:popTop}]"
			@touchmove.stop.prevent="preventTouchMove">
			<view @click.stop="" class="filterContent">

				<scroll-view scroll-y style="width: 100%;height: 503rpx;">

					<view style="display: flex;flex-direction: column;">
						<text class="filter-title">工单类型</text>

						<view class="filter-content">
							<text class="filter-item" :class="item.check?'active':''"
								v-for="(item, index) in sourceList" :key="index" @click.stop="sourceClick(index)">
								{{item.name}}
							</text>
						</view>

						<text class="filter-title">快捷筛选</text>

						<view class="filter-content">
							<text class="filter-item" :class="item.check?'active':''" v-for="(item, index) in stateList"
								:key="index" @click.stop="stateClick(index)">
								{{item.name}}
							</text>
						</view>

					</view>

				</scroll-view>

				<view class="filter-bottom">
					<text class="cancel" @click.stop="cancelFilter">取消</text>
					<text class="confirm" @click.stop="confirmFilter">确定</text>
				</view>

			</view>
		</view>

		<view class="button-container">
			<button class="btn-item" @click="commit(1)">库存占用</button>
			<button class="btn-item" @click="commit(2)">库存释放</button>
		</view>

	</view>
</template>

<script>
	import {
		otastoragelist
	} from '@/api/car-api.js';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		filterNull
	} from "@/utils/filters";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				showStatus: false,
				keyword: '',
				storeName: '选择门店',
				orderSourceCode: '',
				orderStatusName: '',
				workOrderType: '',
				workOrderStatus: '',
				type: '',
				popTop: this.StatusBar + this.CustomBar + 36 + 'px',
				storeId: '',
				list: [],
				showFilter: false,
				sourceList: [{
					key: '1',
					name: '库存占用',
				}, {
					key: '2',
					name: '库存释放',
				}],
				stateList: [{
						key: '0',
						name: '待执行',
					},
					{
						key: '1',
						name: '已执行',
					}
				],
				childStateList: [],
			};
		},
		onReady() {

			let query = uni.createSelectorQuery().in(this);
			query.select('#test').boundingClientRect(data => {
				this.popTop = data.top + 'px'
			}).exec();
		},
		onLoad(option) {

			if (!uni.$u.test.isEmpty(option.otaPlat)) {
				this.type = option.otakey
				this.orderSourceCode = option.otaPlat

				console.log('收到 option.otaPlat==>' + option.otaPlat);
				console.log('收到 option.otakey==>' + option.otakey);
			}

			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] +
				(92 / 750 * uni.getSystemInfoSync().windowWidth) - 0.5;

			uni.$on('refreshota', () => {
				this.mescroll.triggerDownScroll();
			})
		},
		methods: {
			filterNull,
			statusType(type, status) {
				if (type === 1) {
					if (status === 0) {
						return '占用中';
					}
					if (status === 1 || status === 4 || status === 7 || status === 8 || status === 9 || status === 10 ||
						status === 11) {
						return '占用失败';
					}
					if (status === 2) {
						return '占用成功';
					}
				}
				if (type === 2) {
					if (status === 6) {
						return '释放中';
					}
					if (status === 1 || status === 5 || status === 7 || status === 9 || status === 10 || status === 11) {
						return '释放失败';
					}
					if (status === 3) {
						return '释放成功';
					}
				}
			},
			statusFlag(status) {
				if (status !== 0 && status !== 2 && status !== 3 && status !== 6) {
					return true;
				}
				return false;
			},
			upCallback(page) {
				console.log("开始请求");

				var params = {
					keyWord: this.keyword,
					workOrderType: this.workOrderType,
					workOrderStatus: this.workOrderStatus,
					pageNum: page.num,
					pageSize: page.size,
					requestSource: 'PC'
				}
				otastoragelist(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
                uni.$u.debounce(()=>{
                    this.mescroll.triggerDownScroll();
                }, 1000)
			},

			makephone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

			sourceClick(index) {
				this.sourceList.forEach((item, i) => {
					item.check = index === i

				})

				this.$forceUpdate()
			},

			stateClick(index) {
				this.stateList.forEach((item, i) => {
					item.check = index === i
				})

				this.$forceUpdate()
			},

			preventTouchMove() {

			},

			confirmFilter() {
				this.showFilter = false

				this.workOrderType = this.sourceList.find(item => item.check) ? this.sourceList.find(item => item.check)
					.key : ''


				this.workOrderStatus = this.stateList.find(item => item.check) ? this.stateList.find(item => item.check)
					.key : ''

				this.mescroll.triggerDownScroll();
			},

			cancelFilter() {
				this.showFilter = false

				const sourceIndex = this.sourceList.findIndex(item => item.key == this.workOrderType);

				const stateIndex = this.stateList.findIndex(item => item.key == this.workOrderStatus);

				this.sourceClick(sourceIndex)

				this.stateClick(stateIndex)
			},

			itemclick(item) {
				getApp().globalData.otaStorageDetail = item
				uni.navigateTo({
					url: '/workbench/ota/otastoredetail' + uni.$u.queryParams(item),
				})
			},

			commit(type) {
				uni.navigateTo({
					url: '/workbench/ota/addstoragestate?type=' + type,
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.order-source {
		font-size: 22rpx;
		padding: 2rpx 5rpx;
		color: #00bfbf;
		border-radius: 8rpx;
		border: 1rpx solid #00bfbf;
		margin-left: 5rpx;
		white-space: nowrap;
	}

	.title-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 106rpx;
		padding: 0 22rpx;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: -47rpx;
			right: 0;
			height: 2rpx;
			background-color: #f5f5f5;
		}
	}

	.order-status {
		color: #02BFBE;
		font-size: 28rpx;
	}

	.content-wrap {
		display: flex;
		align-items: flex-start;
		margin: 20rpx;

		.name {
			font-size: 28rpx;
			color: #666;
		}

		.value {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;
		}
	}

	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx 20rpx 0;
		color: #666;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}

	.filterPop {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999999999;

		.filterContent {
			background-color: #ffffff;
			height: 639rpx;


			.filter-title {
				font-size: 28rpx;
				color: #333;
				margin: 23rpx 20rpx;

			}

			.filter-content {
				margin-left: 43rpx;
				display: flex;
				flex-wrap: wrap;
			}

			.filter-item {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 28rpx;
				background-color: #EFEFEF;
				color: #666666;
				margin: 0 30rpx 23rpx 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&.active {
					color: #fff;
					background-color: #1673FF;
				}
			}

			.filter-bottom {
				height: 68rpx;
				display: flex;
				margin: 34rpx 46rpx;
				background-color: #1673FF;
				box-sizing: border-box;
				border-radius: 8rpx;

				.cancel {
					flex: 1;
					text-align: center;
					line-height: 68rpx;
					color: #1673FF;
					background-color: #FFFFFF;
					margin: 2rpx;
					border-radius: 8rpx;
				}

				.confirm {
					flex: 1;
					text-align: center;
					line-height: 68rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.button-container {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		// height: 100rpx;
		bottom: 0;
		z-index: 999;
		background-color: white;
		align-items: center;
		padding: 10rpx 10rpx 0;
		flex-wrap: wrap;

	}

	.btn-item {
		min-width: 160rpx;
		flex: 1;
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 0 10rpx 10rpx;
		background-color: $xz-bgColor-blue;
		color: white;
		white-space: nowrap;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 26rpx;
	}
</style>
